<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar :title="optoions.name" title-size="36" :border-bottom="false"> </u-navbar>
        <!-- <view class="card shaixuan dis-flex flex-y-between">
					<view class="sx-l dis-flex">
						<view class="sx-item mar-20" @click="show = true">
							<text>智能排序</text>
							<u-icon style="margin-left: 10rpx;" name="arrow-down" color="#333333" size="16"></u-icon>
						</view>
					</view>
					<view class="sx-r sx-item">
						<text>筛选</text>
						<u-icon style="margin-left: 10rpx;" name="arrow-down" color="#333333" size="16"></u-icon>
					</view>
				</view> -->
      </view>

      <!-- <view class="hot">热门推荐</view> -->
      <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      <view class="list">
        <view class="active-item dis-flex" v-for="(item, index) in itemList" :key="index">
          <view
            class="fanli-detail dis-flex"
            @click="routeTo('/other/merchant-center/merchant-center-service?id=')"
            style="margin-bottom: 30rpx"
          >
            <u-image
              class="goods-avarar"
              :src="`${getImageUrl('banner.png')} `"
              width="345rpx"
              height="345rpx"
            ></u-image>
            <view class="goods-con">
              <view class="tl oneline-hide-1">{{ item.title }}</view>
              <!-- <view class="type"><text style="margin-right: 10rpx;">足疗/按摩</text>  <text> ¥78/人 </text></view> -->
              <view class="sales">
                <text class="star">4.9分</text>
                <text class="pos">距您780m</text>
              </view>
              <view class="bottom dis-flex flex-y-center flex-y-between">
                <view class="price">
                  <text style="font-size: 28rpx">¥</text>
                  <text>160.00</text>
                  <text style="font-size: 28rpx">起</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <u-popup v-model="show" mode="top" height="400" border-radius="14">
      <view> 人生若只如初见，何事秋风悲画扇 </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      categoryList: [
        {
          name: '足疗/按摩',
          icon: '/static/wm.png',
          path: '/lianmeng/store-list-waimai-cate?cate'
        },
        {
          name: '酒吧',
          icon: '/static/tg.png',
          path: '/lianmeng/store-list-group'
        },
        {
          name: '米粉面馆',
          icon: '/static/jdzs.png',
          path: '/lianmeng/store-list-hotel'
        },
        {
          name: '早餐早点',
          icon: '/static/xxyl.png',
          path: '/lianmeng/store-list-yule'
        },
        {
          name: '卤味烧烤',
          icon: '/static/jzfw.png',
          path: '/lianmeng/store-list-service'
        }
      ],
      itemList: [
        {
          picUrl: '',
          title: '乡村儿童守护公益计划乡村儿童守护公益',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远，关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        }
      ],
      city: '',
      imgStyle: {
        width: '12rem'
      },
      optoions: {}
    }
  },
  onLoad(options) {
    console.log('options', options)
    this.optoions = options
    this.queryList(1)
  },
  methods: {
    onCity() {
      uni.$on('selectAddress', (res) => {
        this.cityCode = res.code
        this.city = res.name
        this.queryList(1)
        uni.$off('selectAddress')
      })
      uni.navigateTo({
        url: '/other/select-city/select-city'
      })
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    isArray(array) {
      return Object.prototype.toString.call(array) === '[object Array]'
    },
    urlEncode(obj = {}) {
      const result = []
      for (const key in obj) {
        const item = obj[key]
        if (!item) {
          continue
        }
        if (this.isArray(item)) {
          item.forEach((val) => {
            result.push(key + '=' + val)
          })
        } else {
          result.push(key + '=' + item)
        }
      }
      return result.join('&')
    },
    routeToCate(item) {
      let query = this.urlEncode(item)

      uni.navigateTo({
        url: '/lianmeng/store-list-waimai-cate?' + query
      })
    },
    queryList(pageNo = 1, pageSize = 10) {
      if (pageNo === 1) {
        this.itemList = []
      }
      this.$u.api
        .getGoodsPage({
          pageNo,
          pageSize,
          shopCityId: this.cityCode,
          categoryId: ''
        })
        .then((res) => {
          // this.$refs.paging.complete(res.data.list)
        })
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background-color: #f0f0f0;
}

.address {
  font-size: 30rpx;
}

.searchView {
  padding: 13rpx 20rpx;
  background-color: #fff;
}

.card {
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.service {
  padding: 20rpx 0 20rpx 0;
  height: 180rpx;

  .item {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: column;

    .name {
      font-size: 26rpx;
      color: #333333;
    }
  }
}

.hot {
  font-weight: 600;
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 30rpx;
  padding-top: 10rpx;
  margin-left: 20rpx;
}
.shaixuan {
  padding: 30rpx;
  justify-content: space-around;
  .sx-item {
    // width: 130rpx;
    height: 60rpx;
    background: #ffffff;
    border-radius: 10rpx;
    line-height: 60rpx;
    padding: 0 12rpx;
    font-size: 28rpx;
    color: #333333;
  }
  .mar-20 {
    margin-right: 20rpx;
  }
}
.list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20rpx;

  .active-item:nth-child(odd) {
    margin-right: 20rpx;
  }

  .active-item {
    width: 345rpx;
    display: inline-block;
    margin-right: 0;
    height: 520rpx;
    margin-bottom: 20rpx;
    background-color: #fff;

    .fanli-detail {
      padding: 0;
      flex-flow: column;
      height: 100%;
      .goods-avarar {
        border-radius: 10rpx;
        background-color: #fff;
      }

      .goods-con {
        padding: 20rpx;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        height: 215rpx;
        .tl {
          font-size: 28rpx;
          color: #333333;
        }

        .sales {
          .star {
            font-weight: 600;
            font-size: 30rpx;
            color: #10a28f;
            margin-right: 10rpx;
          }

          .pos {
            font-size: 22rpx;
            color: #999999;
          }
        }
        .type {
          font-size: 22rpx;
          color: #999999;
        }
        .bottom {
          font-size: 24rpx;
          color: #666666;
          width: 100%;
          .price {
            font-weight: 600;
            font-size: 36rpx;
            color: #fa453c;
          }
        }
      }
    }
  }
}
</style>
